<template>
  <div class="step" v-if="state.show">
    <img class="down" src="/public/images/ic_menu_收起.png" @click="show()" />
    <span class="title">当前步骤</span>
    <div class="content">
      <!-- <div style="position: absolute; left: 11px; top: 50px">
        <div class="decorate1"></div>
        <div class="decorateLine"></div>
        <div class="decorate2"></div>
      </div> -->
      <div style="margin-left: 25px; font-size: 15px">
        步骤目录: {{ HomeContent.Default.nowStep.value.Container }}
      </div>
      <div
        style="margin-left: 25px; margin-top: 5px; margin-bottom: 18px; font-size: 15px"
      >
        步骤描述:{{ HomeContent.Default.nowStep.value.Description }}
      </div>
      <!-- 操作 -->
      <div @click="lastStep" class="lastStep">上一步</div>
      <div @click="nextStep" class="nextStep">下一步</div>
      <div @click="operatingSteps" class="operatingSteps">
        <span style="margin-left: 21px; margin-right: 10px">操作步骤</span>
        <img src="/public/images/步骤_pic/三角形.png" style="margin-bottom: 2px" />
      </div>
    </div>
  </div>
  <div class="StowedState" @click="show()" v-else>
    <span style="font-size: 15px; color: black">当前步骤</span>
    <img src="/public/images/ic_menu_展开.png" class="expArr" />
  </div>

  <!-- 操作列表窗口 -->
  <div class="cover" v-if="showOperatingSteps">
    <div class="operationPop">
      <div class="tit">操作步骤</div>
      <span class="close" @click="closePop">×</span>
      <div class="positionList">
        <a-tabs v-model:activeKey="activeKey">
          <a-tab-pane
            v-for="(item, index) in HomeContent.Default.getAllStep.value"
            :key="index"
          >
            <template #tab>
              <span>{{ item.Project }}</span>
              <img
                v-if="item.IsLight"
                src="/images/步骤_pic/圆形.png"
                style="width: 6px; height: 6px; margin-bottom: 25px; margin-left: 5px"
              />
              <img
                v-else
                src="/public/images/步骤_pic/圆形2.png"
                style="width: 6px; height: 6px; margin-bottom: 25px; margin-left: 5px"
              />
            </template>
            <div class="box1">
              <div class="box2">
                <div
                  class="optionsContent"
                  v-for="(items, indexs) in item.Containers"
                  :key="items.Container"
                >
                  <h2>{{ indexs + 1 }}.{{ items.Container }}</h2>
                  <div
                    class="operation"
                    v-for="its in items.Descriptions"
                    :key="its.Id"
                    @mouseenter="showSkip(its)"
                  >
                    <span class="steps">{{ its.Description }}</span>
                    <span class="completeTrue" v-if="its.IsComplete">
                      <img
                        src="/public/images/步骤_pic/已完成.png"
                        style="
                          width: 24px;
                          height: 24px;
                          margin-right: 6px;
                          margin-bottom: 4px;
                        "
                      />已完成
                    </span>
                    <span class="completeFalse" v-else>
                      <img
                        src="/public/images/步骤_pic/未完成.png"
                        style="
                          width: 24px;
                          height: 24px;
                          margin-right: 6px;
                          margin-bottom: 4px;
                        "
                      />未完成
                    </span>
                    <img
                      v-show="stepsId == its.Id"
                      class="skip"
                      @click="SkipStep(its.Id)"
                      src="/public/images/步骤_pic/跳转.png"
                    />
                  </div>
                </div>
              </div>
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import HomeContent from "../HomeContent";
import WebSocketComponent from "@runtime/module/WebSocket/WebSocketComponent";
import { ClientMessage } from "@runtime/generate/message/ClientMessage";
import MessageCode from "../MessageCode";
const activeKey = ref(0);
const isFinished = ref(false);
const isCurrentAllFinish = ref(false);
const isFinishedId = ref(0);
const state = reactive({
  show: true,
});

function show() {
  state.show = !state.show;
}
function closePop() {
  showOperatingSteps.value = false;
}
const stepsId = ref();
function showSkip(value: any) {
  stepsId.value = value.Id;
}
async function lastStep() {
  WebSocketComponent.Default.PostMessage(
    new ClientMessage.DiagnosisAdapterMessage(
      MessageCode.Default.MsgCodesList.DIAGNOSTIC_STEP_VIEW_LAST
    )
  );
  // ============================
  let newArr: any = await WebSocketComponent.Default.PostMessageAsync(
    new ClientMessage.DiagnosisAdapterRequest(
      MessageCode.Default.MsgCodesList.DIAGNOSTIC_GET_WEAR_INFO
    )
  );
  console.log("穿戴信息", JSON.parse(newArr.Content).Result);
  HomeContent.Default.wearInfo.value = JSON.parse(newArr.Content).Result;
  HomeContent.Default.wearInfo.value.forEach((element: { Id: any; IsWear: any }) => {
    if (element.Id == 6 && element.IsWear) {
      // 绝缘手套
      HomeContent.Default.isWearOk.value = true;
    } else if (element.Id == 6 && element.IsWear == false) {
      HomeContent.Default.isWearOk.value = false;
    } else if (element.Id == 5 && element.IsWear) {
      // 护目镜
      HomeContent.Default.isWearGogglesOk.value = true;
    } else if (element.Id == 5 && element.IsWear == false) {
      HomeContent.Default.isWearGogglesOk.value = false;
    } else if (element.Id == 4 && element.IsWear) {
      // 绝缘鞋
      HomeContent.Default.isWearShoeOk.value = true;
    } else if (element.Id == 4 && element.IsWear == false) {
      HomeContent.Default.isWearShoeOk.value = false;
    } else if (element.Id == 3 && element.IsWear) {
      // 防酸碱手套
      HomeContent.Default.isWearGlove3Ok.value = true;
    } else if (element.Id == 3 && element.IsWear == false) {
      HomeContent.Default.isWearGlove3Ok.value = false;
    } else if (element.Id == 2 && element.IsWear) {
      // 安全帽
      HomeContent.Default.isWearHelmetOk.value = true;
    } else if (element.Id == 2 && element.IsWear == false) {
      HomeContent.Default.isWearHelmetOk.value = false;
    } else if (element.Id == 1 && element.IsWear) {
      // 棉手套
      HomeContent.Default.isWearGlove2Ok.value = true;
    } else if (element.Id == 1 && element.IsWear == false) {
      HomeContent.Default.isWearGlove2Ok.value = false;
    }
  });
}
async function nextStep() {
  WebSocketComponent.Default.PostMessage(
    new ClientMessage.DiagnosisAdapterMessage(
      MessageCode.Default.MsgCodesList.DIAGNOSTIC_STEP_VIEW_NEXT
    )
  );
  // 同步穿戴 ==========================================
  let newArr: any = await WebSocketComponent.Default.PostMessageAsync(
    new ClientMessage.DiagnosisAdapterRequest(
      MessageCode.Default.MsgCodesList.DIAGNOSTIC_GET_WEAR_INFO
    )
  );
  console.log("穿戴信息", JSON.parse(newArr.Content).Result);
  HomeContent.Default.wearInfo.value = JSON.parse(newArr.Content).Result;
  HomeContent.Default.wearInfo.value.forEach((element: { Id: any; IsWear: any }) => {
    if (element.Id == 6 && element.IsWear) {
      // 绝缘手套
      HomeContent.Default.isWearOk.value = true;
    } else if (element.Id == 6 && element.IsWear == false) {
      HomeContent.Default.isWearOk.value = false;
    } else if (element.Id == 5 && element.IsWear) {
      // 护目镜
      HomeContent.Default.isWearGogglesOk.value = true;
    } else if (element.Id == 5 && element.IsWear == false) {
      HomeContent.Default.isWearGogglesOk.value = false;
    } else if (element.Id == 4 && element.IsWear) {
      // 绝缘鞋
      HomeContent.Default.isWearShoeOk.value = true;
    } else if (element.Id == 4 && element.IsWear == false) {
      HomeContent.Default.isWearShoeOk.value = false;
    } else if (element.Id == 3 && element.IsWear) {
      // 防酸碱手套
      HomeContent.Default.isWearGlove3Ok.value = true;
    } else if (element.Id == 3 && element.IsWear == false) {
      HomeContent.Default.isWearGlove3Ok.value = false;
    } else if (element.Id == 2 && element.IsWear) {
      // 安全帽
      HomeContent.Default.isWearHelmetOk.value = true;
    } else if (element.Id == 2 && element.IsWear == false) {
      HomeContent.Default.isWearHelmetOk.value = false;
    } else if (element.Id == 1 && element.IsWear) {
      // 棉手套
      HomeContent.Default.isWearGlove2Ok.value = true;
    } else if (element.Id == 1 && element.IsWear == false) {
      HomeContent.Default.isWearGlove2Ok.value = false;
    }
  });
}
const showOperatingSteps = ref(false);
async function operatingSteps() {
  // 点击出现弹窗
  showOperatingSteps.value = !showOperatingSteps.value;
  let newArr: any = await WebSocketComponent.Default.PostMessageAsync(
    new ClientMessage.DiagnosisAdapterRequest(
      MessageCode.Default.MsgCodesList.DIAGNOSTIC_STEP_CONTENT
    )
  );
  HomeContent.Default.getAllStep.value = Array.from(JSON.parse(newArr.Content).Result);

  HomeContent.Default.getAllStep.value.forEach((element: any) => {
    element.IsLight = true;
  });
  //处理数据
  HomeContent.Default.getAllStep.value.forEach((item: any, index: any) => {
    item.Containers.forEach((element: any) => {
      for (let index = 0; index < element.Descriptions.length; index++) {
        if (!element.Descriptions[index].IsComplete) {
          item.IsLight = false;
          break;
        }
      }
    });
  });
}
async function SkipStep(id: any) {
  console.log("跳转步骤的id", id);

  showOperatingSteps.value = false;
  WebSocketComponent.Default.PostMessage(
    new ClientMessage.DiagnosisAdapterMessage(
      MessageCode.Default.MsgCodesList.DIAGNOSTIC_STEP_VIEW_SET_STEP,
      JSON.stringify(id)
    )
  );
  // 同步穿戴 ==========================================
  let newArr: any = await WebSocketComponent.Default.PostMessageAsync(
    new ClientMessage.DiagnosisAdapterRequest(
      MessageCode.Default.MsgCodesList.DIAGNOSTIC_GET_WEAR_INFO
    )
  );
  console.log("穿戴信息", JSON.parse(newArr.Content).Result);
  HomeContent.Default.wearInfo.value = JSON.parse(newArr.Content).Result;
  HomeContent.Default.wearInfo.value.forEach((element: { Id: any; IsWear: any }) => {
    if (element.Id == 6 && element.IsWear) {
      // 绝缘手套
      HomeContent.Default.isWearOk.value = true;
    } else if (element.Id == 6 && element.IsWear == false) {
      HomeContent.Default.isWearOk.value = false;
    } else if (element.Id == 5 && element.IsWear) {
      // 护目镜
      HomeContent.Default.isWearGogglesOk.value = true;
    } else if (element.Id == 5 && element.IsWear == false) {
      HomeContent.Default.isWearGogglesOk.value = false;
    } else if (element.Id == 4 && element.IsWear) {
      // 绝缘鞋
      HomeContent.Default.isWearShoeOk.value = true;
    } else if (element.Id == 4 && element.IsWear == false) {
      HomeContent.Default.isWearShoeOk.value = false;
    } else if (element.Id == 3 && element.IsWear) {
      // 防酸碱手套
      HomeContent.Default.isWearGlove3Ok.value = true;
    } else if (element.Id == 3 && element.IsWear == false) {
      HomeContent.Default.isWearGlove3Ok.value = false;
    } else if (element.Id == 2 && element.IsWear) {
      // 安全帽
      HomeContent.Default.isWearHelmetOk.value = true;
    } else if (element.Id == 2 && element.IsWear == false) {
      HomeContent.Default.isWearHelmetOk.value = false;
    } else if (element.Id == 1 && element.IsWear) {
      // 棉手套
      HomeContent.Default.isWearGlove2Ok.value = true;
    } else if (element.Id == 1 && element.IsWear == false) {
      HomeContent.Default.isWearGlove2Ok.value = false;
    }
  });
  // 把界面关掉
  showOperatingSteps.value = false;
}
// 自动操作，先不做
async function automation() {
  let newArr: any = await WebSocketComponent.Default.PostMessageAsync(
    new ClientMessage.DiagnosisAdapterRequest(
      MessageCode.Default.MsgCodesList.DIAGNOSTIC_STEP_VIEW_AUTO
    )
  );
}
</script>

<style scoped>
.step {
  position: absolute;
  left: 0px;
  top: 54px;
  min-width: 599px;
  height: 200px;
  background: #ffffff;
  border-radius: 16px;
  padding-right: 20px;
}
.down {
  position: absolute;
  top: 16px;
  left: 9px;
}
.title {
  font-size: 15px;
  /* font-family: YouSheBiaoTiHei; */
  /* font-weight: 600; */
  color: black;
  position: absolute;
  top: 16px;
  left: 38px;
}
.StowedState {
  position: absolute;
  left: 0px;
  top: 55px;
  width: 130px;
  height: 50px;
  background: #ffffff;
  text-align: center;
  line-height: 50px;
  border-radius: 10px;
}
.expArr {
  margin-top: -6px;
  margin-left: 3px;
}
.content {
  min-width: 330px;
  font-size: 16px;
  padding-top: 10px;
  color: black;
  margin-top: 50px;
}
.close {
  font-size: 50px;
  position: absolute;
  right: 40px;
  top: 6px;
  color: black;
}

.decorate1 {
  width: 6px;
  height: 6px;
  background-color: black;
  border-radius: 50%;
  position: absolute;
  top: 20px;
}
.decorateLine {
  display: inline-block;
  width: 1px;
  height: 25px;
  background: rgba(168, 168, 168, 1);
  position: absolute;
  top: 26px;
  left: 2px;
}
.decorate2 {
  width: 6px;
  height: 6px;
  background-color: black;
  border-radius: 50%;
  position: absolute;
  top: 51px;
}
.operationStep {
  position: absolute;
  left: 418px;
  bottom: 80px;
  width: 100px;
  height: 150px;
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}
.operationStep > div {
  width: 100px;
  border-radius: 5px;
  background-color: #ffffff;
  height: 40px;
  color: black;
  text-align: center;
  line-height: 40px;
  font-size: 14px;
  font-weight: 600;
}
.operationPop {
  width: 1447px;
  height: 954px;
  background-color: #ffffff;
  border-radius: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
}
.cover {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 99;
}
.tit {
  color: black;
  width: 100%;
  text-align: start;
  margin-left: 30px;
  margin-top: 30px;
  font-size: 30px;
  font-weight: 800;
}
.positionList {
  width: 98%;
  height: 30px;
  margin-left: 1%;
  margin-top: 10px;
  padding: 0 15px;
}
.box1 {
  width: 1380px;
  height: 783px;
  margin-top: 10px;
  border: 1px solid #f0f0f0;
  border-radius: 17px;
}
.box2 {
  width: 101.6%;
  height: 100%;
  overflow-y: auto;
  margin-right: 20px;
  padding: 25px 85px 0 37px;
  /* margin-top: 0.5%; */
}
:deep().box2::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 6px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}

:deep().box2::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/

  border-radius: 10px;
  background: #dfe1e8;
}

:deep().box2::-webkit-scrollbar-track {
  /*滚动条里面轨道*/

  border-radius: 10px;
  background: #f8f8f8;
  /* margin-left: 15px; */
}
.optionsContent {
  color: black;
}
.operation {
  width: 1242px;
  min-height: 46px;
  line-height: 46px;
  border-bottom: 1px solid #f1f3f0;
  font-size: 18px;
}
.skip {
  width: 24px;
  height: 24px;
  margin-left: 34px;
}
.operation:hover {
  background-image: url("/images/步骤_pic/矩形背景.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
h2 {
  color: black;
  font-size: 22px;
  font-weight: 600;
  margin-left: 26px;
}
.steps {
  display: inline-block;
  margin-left: 60px;
  width: 81%;
}
.completeTrue {
  font-size: 16px;
  color: black;
  display: inline-block;
  width: 80px;
  height: 30px;
}
.completeFalse {
  font-size: 16px;
  color: #ffbe99;
  display: inline-block;
  width: 80px;
  height: 30px;
}
:deep().ant-tabs-tab + .ant-tabs-tab {
  margin-left: 120px;
}
:deep().ant-tabs > .ant-tabs-nav,
.ant-tabs > div > .ant-tabs-nav {
  height: 50px;
}
:deep().ant-tabs-ink-bar {
  background: black;
}
:deep().ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
  color: black;
  font-size: 20px;
}
:deep().ant-tabs-tab-btn {
  font-size: 18px;
}
:deep().ant-tabs > .ant-tabs-nav .ant-tabs-nav-wrap,
.ant-tabs > div > .ant-tabs-nav .ant-tabs-nav-wrap {
  padding-right: 1px;
}
:deep().ant-tabs-top > .ant-tabs-nav .ant-tabs-ink-bar,
.ant-tabs-top > div > .ant-tabs-nav .ant-tabs-ink-bar {
  bottom: 7px;
  /* width: 88px !important; */
}
:deep().ant-tabs-top > .ant-tabs-nav:before,
.ant-tabs-top > div > .ant-tabs-nav:before {
  bottom: 7px;
}
.lastStep {
  height: 38px;
  width: 114px;
  line-height: 38px;
  text-align: center;
  display: inline-block;
  color: black;
  font-size: 18px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid black;
  background-color: #ffffff;
  margin-left: 20px;
}
.nextStep {
  height: 38px;
  width: 114px;
  line-height: 38px;
  text-align: center;
  display: inline-block;
  color: black;
  font-size: 18px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid black;
  background-color: #ffffff;
  margin-left: 20px;
}
.operatingSteps {
  height: 38px;
  width: 135px;
  line-height: 38px;
  display: inline-block;
  color: black;
  font-size: 18px;
  font-weight: 600;
  border-radius: 6px;
  background-color: #9af94e;
  margin-left: 156px;
}
</style>
